import React, {
    useEffect,
    useRef,
} from 'react';
import { Chart } from '@antv/g2';
const data = [
    { item: '一', count: 40, percent: 0.4 },
    { item: '二', count: 21, percent: 0.21 },
    { item: '三', count: 17, percent: 0.17 },
    { item: '四', count: 13, percent: 0.13 },
    { item: '五', count: 9, percent: 0.09 },
];
const G21 = () => {
    // 使用 useRef 创建一个 ref 对象，用于获取 DOM 节点
    const chartRef = useRef<Chart>();

    useEffect(() => {
        // 初始化图表实例
        chartRef.current = new Chart({
            container: 'fillet',
            autoFit: true,
        });
        chartRef.current.coordinate({ type: 'theta', outerRadius: 0.8, innerRadius: 0.5 });
        chartRef.current
            .interval()
            .data(data)
            .transform({ type: 'stackY' })
            .encode('y', 'percent')
            .encode('color', 'item')
            .legend('color', { position: 'bottom', layout: { justifyContent: 'center' } })
            .label({
                text:'item'
            })
            .tooltip((data) => ({
                name: data.item,
                value: `${data.percent * 100}%`,
            }))
            .legend(false);
        // 渲染图表
        chartRef.current.render();

        // 在组件卸载时销毁图表
        return () => {
            chartRef.current?.destroy();
        };
    }, []); // 空依赖数组确保此 effect 只执行一次

    return (
        <div id="fillet" style={{ height: '220px',width: '220px',position: 'absolute',top:'50%',right: '0',transform: 'translateY(-50%)' }}></div>
    );
};

export default G21;
